<template>
    <!-- 点检系统 外连接页面 -->
    <div class="w h spot-check">
        <!-- <div class="app-back" @click="goBackProfile()">Home</div> -->
        <div class="app-back" :style="{ filter: isDark ? 'invert(1) hue-rotate(90deg)' : 'invert(0)' }">
            <!-- <van-icon name="more-o p-r2" @click="moreMenu()" /> -->
            <van-icon name="replay p-r4" @click="pageReload()" />
            <van-icon name="close p-l2" @click="goBackProfile()" />
        </div>
        <app-iframe v-if="!reload" class="w h" :href="href"></app-iframe>
    </div>
</template>
  
<script lang="ts">
export default {
    props: {
        href: String,
        isDark: Boolean
    },
    data() {
        return {
            reload: false
        }
    },
    methods: {
        goBackProfile() {
            this.$router.push({ name: 'profile' })
            setTimeout(() => {
                window.location.reload()
            }, 100)
        },
        pageReload() {
            if (this.reload) {
                return
            }
            this.reload = true
            setTimeout(() => {
                this.reload = false
            }, 1000)
        },
        moreMenu() {

        }
    }
}
</script>
  
<style lang="scss" scoped>
.spot-check {
    position: relative;

    .app-back {
        user-select: none;
        position: absolute;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        right: 3px;
        top: 3px;
        color: rgb(28, 28, 228);
        height: 30px;
        line-height: 24px;
        background: #ffffff;
        margin-top: 3px;
        // border-radius: 10px 0px 0px 10px;
        border-radius: 23px;
        border: 4px solid #ffffffc8;
        padding: 0 10px;
        box-shadow: -3px 5px 6px rgb(255 255 255 / 15%);
        border: 1px solid #00000018;
        z-index: 1200;
    }
}
</style>
  